<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Chat</title>
</head>

<body>
  <input type="text" id="messageInput" placeholder="Type your message">
  <button onclick="sendMessage()">Send</button>
  <div id="chatWindow"></div>

  <script>
    const socket = new WebSocket('ws://localhost:8080');

    socket.addEventListener('open', (event) => {
      console.log('Connected to server');
    });

    socket.addEventListener('message', (event) => {
      const chatWindow = document.getElementById('chatWindow');
      const messageDiv = document.createElement('div');
      messageDiv.textContent = event.data;
      chatWindow.appendChild(messageDiv);
    });

    socket.addEventListener('close', (event) => {
      console.log('Connection closed');
    });

    function sendMessage() {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;
      if (message) {
        socket.send(message);
        messageInput.value = '';
      }
    }
  </script>
</body>

</html>